<script setup>
import {ObjectToQueryString, ossImg} from "@/utils/utils";
  import { onLoad, onUnload } from "@dcloudio/uni-app";
  import { ref } from "vue";

  let timer = null

  const offsetLeft = ref(0)

  onLoad(() => {
    const queryString = `?${ObjectToQueryString(uni.getLaunchOptionsSync().query)}`
    setTimeout(() => {
      uni.reLaunch({
        url: '/campaign/pages/2025OreoSnacksXEggyParty/index' + (queryString.length > 1 ? queryString : '')
      })
    }, 3000)
    // timer = setInterval(() => {
    //   if (offsetLeft.value > 40) {
    //     clearInterval(timer)
    //     timer = null
    //       uni.redirectTo({
    //         url: '/campaign/pages/2025OreoSnacksXEggyParty/index'
    //       })
    //   }
    //   offsetLeft.value += 15
    // }, 500)
  })

  onUnload(() => {
    // clearInterval(timer)
    // timer = null
  })
</script>

<template>
  <view
    class="egg-loading"
    :style="{ backgroundImage: `url(${ossImg(`others/2025OreoSnacksXEggyParty/loading/loading_bg.gif`)})`}"
  >
    <!-- <image
      class="w-340px h-294px"
      :src="ossImg('others/2025OreoSnacksXEggyParty/loading/loading_pic.png')"
    ></image> -->
    <!-- <view class="progress">
      <image
        class="progress-line"
        :src="ossImg('others/2025OreoSnacksXEggyParty/loading/loading_line.png')"
      ></image>
      <image
        class="loading-pointer"
        :style="{ left: `${offsetLeft}%` }"
        :src="ossImg('others/2025OreoSnacksXEggyParty/loading/loading_pointer.png')"
      ></image>
    </view> -->
  </view>
</template>

<style lang="scss" scoped>
  .egg-loading {
    width: 100%;
    height: 100vh;
    padding-bottom: 50px;
    box-sizing: border-box;
    background-color: #04BAFE;
    background-size: 375px 748px;
    // background-size: 375px 812px;
    background-position: top center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .progress {
      width: 284px;
      height: 18px;
      margin-top: 52px;
      position: relative;
      display: flex;
      align-items: center;
      .progress-line {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
      }
      .loading-pointer {
        width: 22px;
        height: 24px;
        position: absolute;
        left: 0;
        transition: all .3s;
      }
    }
  }
</style>
